<template>
  <div class="footer">
    <div class="footer-content">
      <div class="container clearfix">
        <div class="item fl">
          <div class="title">下载湖畔客户端</div>
          <div class="content clearfix">
            <div class="fl">
              <span class="iconfont"></span> Android版
              <div class="ewm">
                <img src="../assets/android.jpg" />
                <p>微信扫一扫</p>
              </div>
            </div>
            <div class="fl">
              <span class="iconfont"></span> iPhone版
              <div class="ewm">
                <img src="../assets/ios.jpg" />
                <p>微信扫一扫</p>
              </div>
            </div>
          </div>
        </div>
        <div class="item fl">
          <div class="title">关于湖畔音乐</div>
          <ul>
            <li><a href="https://weibo.com/pdsxytieba?is_all=1" class="">意见反馈</a></li>
            <li>
              <a
                href="/doc/contact"
                class="nuxt-link-exact-active nuxt-link-active"
                >联系我们</a
              >
            </li>
            <li>
              <a href="https://jinshuju.net/f/avIDTu" target="_blank"
                >资源开放平台</a
              >
            </li>
          </ul>
        </div>
        <div class="item fr">
          <div class="title">关注湖畔音乐</div>
          <div class="content clearfix">
            <a href="http://e.weibo.com/musicbaidu" target="_blank" class="fl"
              ><span class="iconfont"></span> 关注微博
            </a>
            <div class="fl">
              <span class="iconfont"></span> 微信公众号
              <div class="ewm">
                <img src="../assets/weixingzh.jpg" />
                <p>微信扫一扫</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="footer-copyright">
      <div class="container">
        <div>
          Copyright 2018 © .TAIHE MUSIC GROUP. 深圳太乐文化科技有限公司版权所有
          <a
            href="https://beian.miit.gov.cn/#/Integrated/index"
            target="_blank"
          >
            [粤ICP备17102508号]
          </a>
        </div>
        <div>
          <span>信息网络传播视听许可证: 1910523</span>
          |
          <a
            target="_blank"
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=44030502002309"
            class="anbei"
          >
            <img
              src="//static0.qianqian.com/web/static/images/icon_police.png"
            />
            粤公网安备: 44030502002309号
          </a>
          |
          <span>增值电信业务经营许可证: 粵B2-20180819</span>
          |
          <span>网络文化经营许可证号码: 粤网文[2018]0902-359号</span>
        </div>
        <div class="feedback">
          <a href="mailto:jubao@taihe.com">举报邮箱: jubao@taihe.com</a>
          |
          <router-link to="/feedback">反馈中心</router-link>
        </div>
      </div>
    </div>
  </div>
</template>


<style scoped>
a {
  color: #909399;
  text-decoration: none;
}

.footer {
  background-color: #1f1f1f;
  height: 300px;
  color: #fff;
  margin-top: 50px;
}

.footer-content {
  background: #282828;
  padding: 50px 0;
}


.footer-content .container{
    width: 80vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}


.footer-content .item.fl {
  margin-right: 64px;
}

.footer-content .item .title {
  color: #fff;
  font-size: 16px;
  margin-bottom: 25px;
}
.footer-content .item .content{
    display: flex;
}
.footer-content .item .content .fl {
  padding: 18px 0;
  width: 160px;
  text-align: center;
  background: #303133;
  position: relative;
  color: #909399;
}

.footer-content .item .content .fl span {
  font-size: 40px;
  vertical-align: middle;
  margin-right: 10px;
}

.footer-content .item .content .fl:first-child {
  margin-right: 10px;
}

.footer-content .item .content .fl .ewm {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  background: #fff;
  width: 100%;
  padding: 10px 0 12px;
  text-align: center;
}

.footer-content .item .content .fl:hover .ewm {
    display: block;
}

.footer-content .item .content .fl .ewm img {
  width: 140px;
}

.footer-content .item .content .fl .ewm p {
  color: #303133;
  margin-top: 8px;
}

.footer-content .item ul li {
  display: inline-block;
  margin-right: 20px;
}

.footer-content .item ul li a:hover {
  color: #e61723;
}

.footer-copyright {
  text-align: center;
  font-size: 12px;
  color: #909399;
  background: #1f1f1f;
  padding: 20px 0;
}

.footer-copyright .container > div {
  margin: 8px 0;
}

.footer-copyright div a,
.footer-copyright div span {
  margin: 0 10px;
}

.footer-copyright div a:hover {
  color: #e61723;
}

.footer-copyright div a img {
  width: 16px;
  height: 16px;
  vertical-align: -3px;
}
</style>